<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="{{STATIC_URL}}css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="{{STATIC_URL}}images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div class="row">
        <div class="span6">
          <div class="row demo-navigation">
            <div class="span7">
              <div class="btn-toolbar">
                <img class="logo" src="{{STATIC_URL}}images/logo.png">
                <div class="btn-group">
                  {%if editing%}
                  <a class="btn btn-warning" href="home"><i class="fui-cmd-16"></i></a>
                  <a class="btn btn-warning" href="add"><i class="fui-plus-16"></i></a>
                  <a class="btn btn-warning active" href="#"><i class="fui-new-16"></i></a>
                  <a class="btn btn-warning" href="delete"><i class="fui-cross-16"></i></a>
                  <a class="btn btn-warning" href="settings"><i class="fui-settings-16"></i></a>

                  <div style="display: inline-table; margin:0" class="navbar btn btn-warning navbar-inverse">
                  {%else%}
                  <a class="btn btn-primary" href="home"><i class="fui-cmd-16"></i></a>
                  <a class="btn btn-primary active" href="#"><i class="fui-plus-16"></i></a>
                  <a class="btn btn-primary" href="update"><i class="fui-new-16"></i></a>
                  <a class="btn btn-primary" href="delete"><i class="fui-cross-16"></i></a>
                  <a class="btn btn-primary" href="settings"><i class="fui-settings-16"></i></a>

                  <div style="display: inline-table; margin:0" class="navbar btn btn-primary navbar-inverse">
                  {%endif%}
                    <ul class="nav" style="margin:0 !important">
                      <li>
                        <i class="fui-man-16"></i> <span>{% if user.first_name %} {{user.first_name}} {%else%}{{user.username}}{%endif%}</span>
                        <ul>
                          <li><a href="/account">Account</a></li>
                          <li><a href="/logout">Logout</a></li>
                          <li><a href="/about">About SQFlight</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!--/.nav-collapse -->

                </div>
              </div> <!-- /toolbar -->
            </div>
          </div> <!-- /demo-navigation -->
        </div>
      </div>

      <div id="add-form" class="row demo-tiles">
        <div class="span12">
          <h3>
            {%if editing%}
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/clipboard.png">
            <span>Edit table: {{tablename}}</span>
            {%else%}
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/add.png">
            <span>Add new table</span>
            {%endif%}
          </h3>

          <div class="tile">
            <div class="row">
              {%if not editing%}
              <h4 class="span5">
                <span class="mrm">Database:</span>
                <select value="Text" class="span3" name="databases">
                  {% for database in databases %}
                  <option value="{{database}}">{{database}}</option>
                  {%endfor%}
                </select>
              </h4>
              {%endif%}
              <h4 class="span5">
                <span class="mrm">Table name:</span>
                <input type="text" placeholder="Table name" old-val="{{tablename}}" id="tablename" value="{{tablename}}"/>
              </h4>
            </div>
            <table {%if editing%}type="update"{%endif%}>
              <thead>
                <tr id="header">
                  <th>Field name</th>
                  <th>Field type</th>
                  <th>Field size</th>
                  <th>Null</th>
                  <th><span class="span1"></span></th>
                </tr>
              </thead>
              <tbody>
                {%if editing%}

                {%for col in cols%}
                <tr class="first column">
                  <td class="col_name" >
                    <input type="text" old-val="{{col.name}}" placeholder="Column name" value="{{col.name}}"/>
                  </td>
                  <td class="col_type">
                    <select old-val="{{col.type}}" value="Text" class="span3" name="typelist_{{col.name}}">
                      <option value="integer"
                              {%if col.type == 'integer'%} selected="selected"{%endif%}>
                              Integer
                      </option>
                      <option value="real"
                              {%if col.type == 'real'%} selected="selected"{%endif%}>
                              Real
                      </option>
                      <option value="text"
                              {%if col.type == 'text'%} selected="selected"{%endif%}>
                              Text
                      </option>
                      <option value="blob"
                              {%if col.type == 'blob'%} selected="selected"{%endif%}>
                              Blob
                      </option>
                    </select>
                  </td>
                  <td  class="col_size">
                    <input type="text" old-val="{{col.size}}" placeholder="size" class="span1" value="{{col.size}}"/>
                  </td>
                  <td  class="col_null">
                    <div class="toggle toggle-icon overtogle" old-val="{{col.no_null}}">
                      <label class="toggle-radio fui-checkmark-16" for="toggleOption{{col.name}}A"></label>
                      <input type="radio" id="toggleOption{{col.name}}A"
                             {%if col.no_null == 0%}checked="checked"{%endif%}>
                      <label class="toggle-radio fui-cross-16" for="toggleOption{{col.name}}A"></label>
                      <input type="radio" id="toggleOption{{col.name}}B"
                             {%if col.no_null == 1%}checked="checked"{%endif%}>
                    </div>
                  </td>
                  <td>
                    <a href="#" class="add btn btn-large btn-info action"><i class="fui-plus-16"></i></a>
                    <a href="#" class="remove btn btn-large btn-danger action"><i class="fui-cross-16"></i></a>
                  </td>
                </tr>
                {%endfor%}
                {%else%}
                {%for i in cols%}
                  <tr class="column">
                  <td class="col_name" >
                    <input type="text" placeholder="Column name"/>
                  </td>
                  <td class="col_type">
                    <select value="Text" class="span3" name="typelist_{{i}}">
                      <option value="integer">Integer</option>
                      <option value="real">Real</option>
                      <option value="text">Text</option>
                      <option value="blob">Blob</option>
                    </select>
                  </td>
                  <td  class="col_size">
                    <input type="text" placeholder="size" class="span1"/>
                  </td>
                  <td  class="col_null">
                    <div class="toggle toggle-icon overtogle">
                      <label class="toggle-radio fui-checkmark-16" for="toggleOption{{i}}A"></label>
                      <input type="radio" id="toggleOption{{i}}A"/>
                      <label class="toggle-radio fui-cross-16" for="toggleOption{{i}}A"></label>
                      <input type="radio" id="toggleOption{{i}}B"/>
                    </div>
                  </td>
                  <td>
                    <a href="#" class="add btn btn-large btn-info action"><i class="fui-plus-16"></i></a>
                    <a href="#" class="remove btn btn-large btn-danger action"><i class="fui-cross-16"></i></a>
                  </td>
                </tr>
                {%endfor%}
                {%endif%}
                <tr class="last column">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </tbody>
            </table>
            <div><div class="span12"></div></div>
            <div class="row">
              <div class="span12">
                <div class="span7"></div>
                <a href="#" id="confirm" class="btn btn-large btn-success">Create</a>
                <a href="#" id="cancel" class="{%if editing%}edit{%endif%} btn btn-large btn-danger">Cancel</a>
              </div>
            </div>
            <form action="/new_table" method="POST" id="form">{% csrf_token %}
              <input id="database" name="database" type="hidden"/>
              <input id="query" name="query" type="hidden"/>
            </form>
          </div>
        </div>
      </div>
    </div> <!-- /container -->

    <footer>
      <div class="container">
        <div class="row">
          <div class="span7">
            <h3 class="footer-title">SQFlight is distributed under GPL v3 License</h3>
          </div> <!-- /span8 -->

          <div class="span5">
            <div class="footer-banner">
              <h3 class="footer-title"><img class="logo2" src="{{STATIC_URL}}images/logo2.png"> SQLite Administrator</h3>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!-- Load JS here for greater good =============================-->
    <script src="{{STATIC_URL}}js/vendor/jquery-1.8.2.min.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery.dropkick-1.0.0.js"></script>
    <script src="{{STATIC_URL}}js/vendor/custom_checkbox_and_radio.js"></script>
    <script src="{{STATIC_URL}}js/vendor/custom_radio.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jquery.placeholder.js"></script>
    <script src="{{STATIC_URL}}js/vendor/jqdialog.min.js"></script>
    <script src="{{STATIC_URL}}js/application.js"></script>
    <script src="{{STATIC_URL}}js/controller/add.js"></script>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
    <![endif]-->
  </body>
</html>

